<!--
 * @Author: your name
 * @Date: 2020-12-28 11:32:50
 * @LastEditTime: 2020-12-31 09:42:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\detail\index.vue
-->
<template>
  <div class="detail">
    <van-swipe :autoplay="3000" >
      <van-swipe-item
        class="swiper-item"
        v-for="item in detail.photo"
        :key="item.id"
      >
        <img lazy-load :src="item.url" alt="">
      </van-swipe-item>>
    </van-swipe>

    <div class="prod-desc">
      <p>{{detail.title}}</p>
      <p class="prod-price">{{detail.price | money}}</p>
      <div class="originPrice">
        <p>原价 <span>{{detail.originPrice | money}}</span></p>
        <p>月销量: {{detail.saleNum}}</p>
      </div>
    </div>

    <van-divider class="line">淘宝图文详情</van-divider>

    <div class="detail-img">
      <van-image
        v-for="image in detail.descContentList"
        :key="image.image.id"
        :src="image.image.url"
        lazy-load
      />
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="totalCount>99 ? '99+' : totalCount "
        @click="jumpCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCartHandler"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/detail'
import { Toast } from 'vant'

export default {
  name: 'Detail',
  data() {
    return {
      detail: {}
    }
  },
  computed: {
    totalCount() {
      return this.$store.getters['cart/totalCount']
    }
  },
  created() {
    const id = this.$route.query.id
    getDetail(id)
      .then(res => {
        console.log('detail:', res)
        this.detail = res.detail
      })
  },
  methods: {
    addCartHandler() {
      const { id, title, image, price } = this.detail
      const current = {
        id,
        title,
        image,
        price,
        count: 1 // 默认选购数量 1
      }

      // 保存到 Vuex 中
      this.$store.commit('cart/add', current)
      Toast.success(
        {
          message: '已添加到购物车',
          duration: 600
        }
      )
    },
    jumpCart() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-item{
  height: 375px;
  img{
    width: 100%;
  }
}
.prod-desc{
  padding: 10px;

  .prod-price{
    color: red;
    font-size: 20px;
    margin-bottom: 0;
  }

  .originPrice{
    color: #bbb;
    font-size: 12px;
    display: flex;
    justify-content: space-between;

    span{
      text-decoration: line-through;
    }
  }
}
.line{
  font-size: 12px;
  border-color: #aaa;
}
</style>
